<template>
    <div class="center-box">
        <div class="title">
            <img src="../../assets/hqrepair/title-bg.png">
            <span class="txt">工单完成情况</span>
        </div>
        <div class="time-boxs">
            <div class="time-box">
                <div class="item1">
                    <img src="../../assets/hqrepair/tip.png">
                    <span>报修总量</span>
                </div>
                <div class="item2">
                    <img src="../../assets/hqrepair/num-box1.png">
                    <span class="item-num">{{data.t1 | currency}}</span>
                </div>
                <div class="item3">
                    <img src="../../assets/hqrepair/data-box.png">
                    <span class="item-num">{{data.today | currency}}</span>
                    <span class="line"></span>
                    <span class="item-num2">{{data.today_over | currency}}</span>
                    <span class="item-title">今日</span>
                </div>
            </div>
            <div class="time-box">
                <div class="item1">
                    <img src="../../assets/hqrepair/tip.png">
                    <span>累计完工</span>
                </div>
                <div class="item2">
                    <img src="../../assets/hqrepair/num-box1.png">
                    <span class="item-num">{{data.t2|currency}}</span>
                </div>
                <div class="item3">
                    <img src="../../assets/hqrepair/data-box.png">
                    <span class="item-num">{{data.week|currency}}</span>
                    <span class="line"></span>
                    <span class="item-num2">{{data.week_over | currency}}</span>
                    <span class="item-title">本周</span>
                </div>
            </div>
            <div class="time-box box2">
                <div class="item1">
                    <img src="../../assets/hqrepair/tip2.png">
                    <span>待受理</span>
                </div>
                <div class="item2">
                    <img src="../../assets/hqrepair/num-box2.png">
                    <span class="item-num">{{data.t3|currency}}</span>
                </div>
                <div class="item3">
                    <img src="../../assets/hqrepair/data-box.png">
                    <span class="item-num">{{data.month|currency}}</span>
                    <span class="line"></span>
                    <span class="item-num2">{{data.month_over|currency}}</span>
                    <span class="item-title">本月</span>
                </div>
            </div>
            <div class="time-box box2">
                <div class="item1">
                    <img src="../../assets/hqrepair/tip2.png">
                    <span>维修中</span>
                </div>
                <div class="item2">
                    <img src="../../assets/hqrepair/num-box2.png">
                    <span class="item-num">{{data.t4|currency}}</span>
                </div>
                <div class="item3">
                    <img src="../../assets/hqrepair/data-box.png">
                    <span class="item-num">{{data.year|currency}}</span>
                    <span class="line"></span>
                    <span class="item-num2">{{data.year_over|currency}}</span>
                    <span class="item-title">本年</span>
                </div>
            </div>
        </div> 
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        t: {
            type: String,
            default: '0'
        }
    },
}
</script>

<style lang="scss" scoped>
$box-width: 100%;
$box-height: 100%;
$box_padding_tb:20px;
.center-box {
    height: $box-height;
    width: $box-width;
    .title {
        position: relative;
        font-size: 1.2vw;
        line-height: 2vw;
        text-shadow: 2px 1px 0px rgba(0, 31, 61, 0.46);
        color: #fff;
        font-family: DingTalk JinBuTi;
        margin-top: 0.2vw;
        img{
            height: 2vw;
        }
        .txt{
            position: absolute;
            left: 20px;
            top: 0;
        }
    }

    .time-boxs {
        display: flex;
        flex-direction: row;
		justify-content: space-between;
        gap: $box_padding_tb;
        padding: 10px 20px;
        .time-box{
            display: flex;
            flex-direction: column;
		    justify-content: space-around;
            .item1{
                flex-basis: 20%;
                img{
                    height: 0.88vw;
                    width: 0.62vw;
                    margin-right: 0.2vw;
                }
                span{
                    font-size: 1.25vw;
                }
            }
            .item2{
                flex-basis: 20%;
                position: relative; 
                img{
                    margin-top: 0.5vw;
                    width: 7vw;
                }
                .item-num{
                    position: absolute;
                    display: block;
                    width: 7vw;
                    height: 2.8vw;
                    font-size: 1.8vw;
                    top: 1.45vw;
                    left: 0;
                    text-align: center;
                    font-family: DINPro;
                    font-weight: bold;
                    color: #07EDEC;
                    text-shadow: 0px 3px 1px rgba(0,0,0,0.39), 0px 1px 11px rgba(156,205,255,0.59);
                }
            }
            .item3{
                flex-basis: 60%;
                position: relative; 
                margin-bottom: 1vw;
                img{
                    height: 4.5vw;
                    margin-left:-10px;
                    text-align: center;
                    margin-top: 0.6vw;
                }
                .item-num{
                    display: block;
                    position: absolute;
                    text-align: center;
                    top: 1vw;
                    width: 6.5vw;
                    font-family: DINPro;
                    font-weight: bold;
                    font-size: 1.8vw;
                    line-height: 1.6vw;
                }
                .line{
                    display: block;
                    position: absolute;
                    top: 2.9vw;
                    height: 1px;
                    background-color: #ADC9FF;
                    width: 4.2vw;
                    left: 1.2vw;
                }
                .item-num2{
                    display: block;
                    position: absolute;
                    text-align: center;
                    top: 2.2vw;
                    width: 6.5vw;
                    font-family: DINPro;
                    font-weight: bold;
                    font-size: 1.4vw;
                    color: #ADC9FF;
                    line-height: 2.93vw;
                }
                .item-title{
                    display: block;
                    position: absolute;
                    top: 4.7vw;
                    width: 6.5vw;
                    font-size:1.2vw;
                    text-align: center; 
                    font-family: Alibaba_275;
                    color: #FFFFFF;
                    text-shadow: 0px 1px 11px rgba(156,205,255,0.59);
                }
            }
        }
        .box2{
           .item1{
             color: #ECC920;
           }
           .item2 .item-num{
            color: #ECC920;
           }
        }
    }
}
</style>